<template>
    <a-modal v-model:open="showModal" :width="600" :title="formTitle" @ok="confirm">
        <div class="pt-[20px]" aria-hidden="true">
            <a-form :model="formData" ref="formRef" :label-col="{ style: { width: '100px' } }">
                <a-form-item label="优惠券名称" name="coupon_name"
                    :rules="[{ required: true, message: '请输入优惠券名称' }, { min: 2, message: '至少2个字符' }, { max: 50, message: '长度不能超过50个字符' }]">
                    <a-input v-model:value="formData.coupon_name" placeholder="请输入优惠券名称" />
                </a-form-item>
                <a-form-item label="是否跳转" name="valid_type">
                    <a-radio-group v-model:value="formData.valid_type">
                        <a-radio :value="0">满额券</a-radio>
                        <a-radio :value="1">折扣券</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item v-if="formData.valid_type == 0" label="面额" name="price"
                    :rules="[{ required: true, message: '请输入面额' }]">
                    <a-input-number class="w-[200px]" v-model:value="formData.price" placeholder="请输入面额" />
                </a-form-item>
                <a-form-item v-else label="折扣" name="discount_rate"
                    :rules="[{ required: true, message: '请输入面额' }]">
                    <a-input-number class="w-[200px]" addon-after="%" v-model:value="formData.discount_rate" placeholder="请输入折扣" />
                </a-form-item>
                <a-form-item label="满足条件" name="min_price_used" extra="满多少元使用 0代表无限制"
                    :rules="[{ required: true, message: '请输入条件' }]">
                    <a-input-number class="w-[200px]" v-model:value="formData.min_price_used" placeholder="请输入条件" />
                </a-form-item>
                <a-form-item label="有效期" name="valid_days"
                    :rules="[{ required: true, message: '请输入有效期' }]">
                    <a-input-number class="w-[200px]" addon-after="天" v-model:value="formData.valid_days" placeholder="请输入有效期" />
                </a-form-item>
                <a-form-item label="状态" name="status">
                    <a-radio-group v-model:value="formData.status" name="status">
                        <a-radio :value="1">启用中</a-radio>
                        <a-radio :value="0">未启用</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="排序" name="sort" :rules="[{ required: true, message: '排序' }]">
                    <a-input-number class="w-[200px]" v-model:value="formData.sort" />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { addCoupon, editCoupon } from '@/utils/api/coupon';

const showModal = ref<boolean>(false);

/**
 * 表单数据
 */
const initialFormData = {
    id: 0,
    coupon_name: '',
    valid_type: 0,
    price: '',
    min_price_used: 0,
    discount_rate: 0,
    valid_days: 30,
    status: 1,
    sort: 100
}

const formData: Record<string, any> = reactive({ ...initialFormData })

const formRef = ref();

const formTitle = ref('添加优惠券');

const setFormData = async (row: any = null) => {
    if (row == null) {
        formTitle.value = '添加优惠券';
        Object.assign(formData, initialFormData);
    } else {
        formTitle.value = '编辑优惠券';
        Object.assign(formData, row);
    }
}

const emit = defineEmits(['complete']);

const confirm = () => {
    formRef.value
        .validate()
        .then(() => {
            if (formData.id > 0) {
                editCoupon(formData).then((res: any) => {
                    if (res.code == 200) {
                        message.success(res.message)
                        showModal.value = false;
                        setTimeout(function () {
                            emit('complete');
                        }, 1000);
                    } else {
                        message.error(res.message)
                    }
                })
            } else {
                addCoupon(formData).then((res: any) => {
                    if (res.code == 200) {
                        message.success(res.message)
                        showModal.value = false;
                        setTimeout(function () {
                            emit('complete');
                        }, 1000);
                    } else {
                        message.error(res.message)
                    }
                })
            }
        });
};



defineExpose({
    showModal,
    setFormData,
})
</script>